<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import jzmj from '../../../../assets/imgs/ic_jzmj.png'
import { getPie3DOption } from '../../info-house-overview/left/getPie3DOption'
import {
  getHouseStatistic,
  getHouseTypeStatistic,
  getHouseSourceCheck,
  getLesseeAnalysis
} from '../api.js'
import DotsTabs from '../../components/dotsTabs.vue'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const overviewInfo = ref([
  {
    title: '累计上架',
    value: 1414,
    unit: '套'
  },
  {
    title: '在架房源',
    value: 960,
    unit: '套'
  },
  {
    title: '预告房源',
    value: 17772,
    unit: '套'
  },
  {
    title: '库存房源',
    value: 10790,
    unit: '套'
  }
])

const houseSourceCheck = ref({})

const updateDataStatistic = (data) => {
  Object.entries(data).forEach(([key, value]) => {
    const one = overviewInfo.value.find((item) => item.title === key)
    one && (one.value = value)
  })
}

const updateDataHouseSourceCheck = (data) => {
  houseSourceCheck.value = data
}

const distritHouseTotalChartRef = ref(null)
const getBarChartOption = (data) => {
  const barWidth = 7
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    title: {
      text: '各城区户型数量统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    colors: ['#91eef7', '#00aeff', '#475ff0', '#00d3bd', '#6958cf'],
    legend: {
      top: 30,
      right: 0,
      itemWidth: 10,
      itemHeight: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: data.cityNames, // ['武鸣', '兴宁', '江南', '青秀', '良庆', '邑宁', '西乡塘']
    },
    series: [
      {
        name: '一室',
        type: 'bar',
        barWidth: barWidth,
        stack: 'total',
        itemStyle: {
          normal: {
            color: '#91eef7',
            // barBorderRadius: [5, 5, 0, 0],
            // label: {
            //   show: true,
            //   // position: 'insideTop',
            //   // formatter: '{c}套'
            // }
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: data.reList[0]['1室'], // [320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: '二室',
        type: 'bar',
        barWidth: barWidth,
        stack: 'total',
        // label: {
        //   show: true
        // },
        itemStyle: {
          normal: {
            color: '#00aeff',
            // label: {
            //   show: true,
            // }
          }
        },
        emphasis: {
          focus: 'series'
        },
        data: data.reList[1]['2室'], // [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '三室',
        type: 'bar',
        barWidth: barWidth,
        stack: 'total',
        // label: {
        //   show: true
        // },
        itemStyle: {
          color: '#475ff0',
        },
        emphasis: {
          focus: 'series'
        },
        data: data.reList[2]['3室'], // [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '四室',
        type: 'bar',
        barWidth: barWidth,
        stack: 'total',
        // label: {
        //   show: true
        // },
        itemStyle: {
          color: '#00d3bd',
        },
        emphasis: {
          focus: 'series'
        },
        data: data.reList[3]['4室'], // [150, 212, 201, 154, 190, 330, 410]
      },
      {
        name: '五室及以上',
        type: 'bar',
        barWidth: barWidth,
        showBackground: true,
        stack: 'total',
        // label: {
        //   show: true
        // },
        itemStyle: {
          color: '#6958cf',
        },
        emphasis: {
          focus: 'series'
        },
        data: data.reList[4]['5室及以上'], // [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  }
}

const updateDataHouseTypeStatistic = (data) => {
  // let cData = {
  //   yAxis: ['武鸣', '兴宁', '江南', '青秀', '良庆', '邑宁', '西乡塘'],
  //   一室: [320, 302, 301, 334, 390, 330, 320],
  //   二室: [120, 132, 101, 134, 90, 230, 210],
  //   三室: [220, 182, 191, 234, 290, 330, 310],
  //   四室: [150, 212, 201, 154, 190, 330, 410],
  //   五室及以上: [820, 832, 901, 934, 1290, 1330, 1320]
  // }
  distritHouseTotalChartRef.value?.updateOption(getBarChartOption(data))
}

const activeTabName = ref('按性别')
const renterChartRef = ref(null)

const updateDataLesseeAnalysis = (data) => {
  console.log('updateDataLesseeAnalysis', data)
  const pieData = data.data.map((e, i) => {
    return {
      name: e.type,
      value: e.count,
      selected: i === 0,
      itemStyle: {
        opacity: 0.9,
      }
    }
  } ) 
  // [
  //   {
  //     name: '男',
  //     value: 92005,
  //     selected: true,
  //     itemStyle: {
  //       opacity: 0.9,
  //       color: '#00d7e9'
  //     }
  //   },
  //   {
  //     name: '女',
  //     value: 36995,
  //     itemStyle: {
  //       opacity: 0.9,
  //       color: '#41c1ff'
  //     }
  //   }
  // ]

   const option = getPie3DOption(pieData, '人')
   renterChartRef.value?.updateOption(option)
}

const reqLesseeAnalysis = () => {
  getLesseeAnalysis({ type: activeTabName.value.slice(1) }).then(res => {
    updateDataLesseeAnalysis(res.data)
  })
}

const tabList = ref([
  { name: '按性别' },
  { name: '按年龄' },
  { name: '按户籍' },
])
const onChangeTab = (activeName) => {
  activeTabName.value = activeName
  reqLesseeAnalysis()
}

const reqData = () => {
  activeTabName.value = '按性别'

  Promise.all([
    getHouseStatistic(),
    getHouseTypeStatistic(),
    getHouseSourceCheck(),
    getLesseeAnalysis({ type: activeTabName.value.slice(1) })
  ]).then(([statisticResult, typeStatisticResult, sourceCheckResult, lesseeAnalysisResult]) => {
    if (statisticResult.success) {
      updateDataStatistic(statisticResult.data)
    }
    if (typeStatisticResult.success) {
      updateDataHouseTypeStatistic(typeStatisticResult.data)
    }
    if (sourceCheckResult.success) {
      updateDataHouseSourceCheck(sourceCheckResult.data)
    }
    if (lesseeAnalysisResult.success) {
      updateDataLesseeAnalysis(lesseeAnalysisResult.data)
    }
  })
}

onMounted(() => {
  reqData()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="上架房源统计" class="total-card">
      <div class="overview-wrap">
        <div class="overview-box" v-for="(item, i) in overviewInfo">
          <div>
            <span class="overview-value">{{ item.value }}</span>
            <span class="overview-unit">{{ item.unit }}</span>
          </div>
          <div class="overview-title">{{ item.title }}</div>
        </div>
      </div>
      <div class="chart">
        <draw-echarts
          ref="distritHouseTotalChartRef"
          width="420"
          height="280"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>

    <card name="房源核验" class="check-card">
      <div class="check-wrap">
        <div class="icon-wrap">
          <img src="@/assets/imgs/ic_fwzs.png" alt="">
        </div>
        <div class="check-item">
          <div class="title">日均核验</div>
          <div class="value">
            {{ houseSourceCheck['日均核验'] }}
            <span class="unit">套</span>
          </div>
        </div>
        <div class="check-item">
          <div class="title">昨日核验</div>
          <div class="value">
            {{ houseSourceCheck['昨日核验'] }}
            <span class="unit">套</span>
          </div>
        </div>
        <div class="check-item">
          <div class="title">日环比</div>
          <div class="value">
            {{ houseSourceCheck['日环比'] }}
            <span class="unit">%</span>
          </div>
        </div>
      </div>
    </card>
    
    <card name="承租人分析" class="renter-card">
      <DotsTabs :tab-list="tabList" v-model:activeName="activeTabName" @change="onChangeTab" />
      <div class="chart">
        <draw-echarts
          ref="renterChartRef"
          width="420"
          height="200"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .total-card {
    height: 410px;
    margin-bottom: var(--card-margin-bottom);

    .overview-wrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .overview-box {
        margin-bottom: 10px;
        width: 23%;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-image: url(/src/assets/imgs/house_rent_bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .overview-value {
          font-size: 16px;
          font-weight: bold;
          color: #fff;
        }
        .overview-unit {
          font-size: 14px;
          color: #aaa;
        }
        .overview-title {
          margin-top: 4px;
          font-size: 14px;
          color: #bbb;
        }
      }
    }

  }

  .check-card {
    height: 180px;
    margin-bottom: var(--card-margin-bottom);
    
    .check-wrap {
      display: flex;
      align-items: center;

      .icon-wrap {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .check-item {
        width: 25%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        .title { 
          font-size: 14px;
          color: #bbb;
          margin-bottom: 12px;
        }
        .value {
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          .unit { 
            font-size: 14px;
            color: #aaa;
          }
        }
      }
    }
  }

  .renter-card {
    height: 315px;
  }  
}
</style>
